<template>
<!--     <div class="home">
        <div id="myChart" :style="{width: '100vh', height: '100vw',}"></div>
        <div v-if="showComment">
            <Comment></Comment>
        </div>
    </div> -->
    <div id="home" ref="home">
        <van-overlay :show="showOverlay" z-index="100000"/> <!-- loading暂时不能用 -->
        <van-loading v-show="showOverlay" size="12vw" color="white" class="loading" vertical/>
        <div id="mapbox" class="map"></div>
        <div v-show="showComment" id="comment">
            <Comment ref="Comment"></Comment>
        </div>
    </div>
</template>

<script>
import Comment from '@/components/comment/comment.vue'
import mapboxgl from 'mapbox-gl'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import { along, bezierSpline, length, lineString } from '@turf/turf'
import { getLocate } from '../api/api'
import Cookies from 'js-cookie';


//echarts.registerMap('world', world)
let fake = [
    [69.11,34.28],

    [19.49,41.18],

    //[3.08,36.42],

    //[-170.43,-14.16],

    //[1.32,42.31],

    [13.15,-8.50],

    //[-61.48,17.20],

    //[-60.00,-36.30],

    [44.31,40.10],

    //[-70.02,12.32],

    //[149.08,-35.15],

    [16.22,48.12],

    [49.56,40.29],

    //[-77.20,25.05],

    [50.30,26.10],

    [90.26,23.43],

    //[-59.30,13.05],

    [27.30,53.52],

    [4.21,50.51],

    //[-88.30,17.18],

    [2.42,6.23],

    [89.45,27.31],

    //[-68.10,-16.20],

    // [18.26,43.52],

    [25.57,-24.45],

    //[-47.55,-15.47],

    // [-64.37,18.27],

    [115.00,4.52],

    [23.20,42.45],

    //[-1.30,12.15],

     [29.18,-3.16],

    [104.55,11.33],

    [11.35,3.50],

    //[-75.42,45.27],
    [117.52, 31.36],

    //[-23.34,15.02],

    //[-81.24,19.20],

    [18.35,4.23],

    [14.59,12.10],

    //[-70.40,-33.24],

    //[116.20,39.55],

    //[-74.00,4.34],

    [43.16,-11.40],

    [15.12,-4.09],

    //[-84.02,9.55],

    [-5.17,6.49],

    [15.58,45.50],

    //[-82.22,23.08],

    [33.25,35.10],

    [14.22,50.05],

    [125.30,39.09],

    //[15.15,-4.20],

    //[12.34,55.41],

    [42.20,11.08],

    //[-61.24,15.20],
    [103.51, 36.04],
     [102.10, 38.28],
    [106.40, 35.32],
    [113.14, 23.08],
    [113.21, 25.09],
    [113.13, 25.58],
    [126.26, 41.56],
    [130.22, 45.52],
    [113.03, 41.02],
    [107.22, 40.46],
    [97.23, 37.22],
    [94.55, 36.26],
    [112.33, 37.54],
    [107.09, 34.22],
    [104.04, 30.40],
    [103.40, 30.39],
    [98.04, 24.06],
    [102.32, 24.22],
    [106.33, 29.35],
    [113.02, 34.27],
    [110.52, 34.31],
    [112.47, 34.43],
    [108.43, 34.20],
    [108.29, 34.18],

    //[-69.59,18.30],

    //[125.34,-8.29],

    //[-78.35,-0.15],

    [31.14,30.01],

    //[-89.10,13.40],

    //[8.50,3.45],

    [38.55,15.19],

    [24.48,59.22],

    [38.42,9.02],

    //[-59.51,-51.40],

    //[-6.56,62.05],

    //[178.30,-18.06],

    //[25.03,60.15],

   //[2.20,48.50],

    [-52.18,5.05],

    //[-149.34,-17.32],

    //[9.26,0.25],

    //[-16.40,13.28],

    [44.50,41.43],

    //[13.25,52.30],

    //[-0.06,5.35],

    //[23.46,37.58],

    //[-51.35,64.10],

    //[-61.44,16.00],

    //[-90.22,14.40],

    //[-2.33,49.26],

    //[-13.49,9.29],

    //[-15.45,11.45],

    //[-58.12,6.50],

    //[-72.20,18.40],

    //[74.00,-53.00],

    [-87.14,14.05],

   // [19.05,47.29],

    //[-21.57,64.10],

    //[77.13,28.37],

    //[106.49,-6.09],

    //[51.30,35.44],

    //[44.30,33.20],

    //[-6.15,53.21],

    //[35.12,31.47],

    //[12.29,41.54],

    //[-76.50,18.00],

    //[35.52,31.57],

    //[71.30,51.10],

    //[36.48,-1.17],

    //[173.00,1.30],

    //[48.00,29.30],

    //[74.46,42.54],

    //[102.36,17.58],

    //[24.08,56.53],

    //[35.31,33.53],

    //[27.30,-29.18],

    //[-10.47,6.18],

    //[13.07,32.49],

    //[9.31,47.08],

    //[25.19,54.38],

    //[6.09,49.37],

    //[47.31,-18.55],

    //[33.48,-14.00],

    [101.41,3.09],

    [73.28,4.00],

    //[-7.55,12.34],

    //[14.31,35.54],

    [-61.02,14.36],

    //[57.30,-20.10],

    //[45.14,-12.48],

    [-99.10,19.20],

    [158.09,6.55],

    //[28.50,47.02],

    //[32.32,-25.58],

    [96.20,16.45],

    //[17.04,-22.35],

    [85.20,27.45],

    //[4.54,52.23],

    [-69.00,12.05],

    //[166.30,-22.17],

    //[174.46,-41.19],

    [-86.20,12.06],

    //[2.06,13.27],

    //[7.32,9.05],

    //[168.43,-45.20],

    [145.45,15.12],

    //[10.45,59.55],

    //[58.36,23.37],

   // [73.10,33.40],

    [134.28,7.20],

    [-79.25,9.00],

    //[147.08,-9.24],

    //[-57.30,-25.10],

    //[-77.00,-12.00],

    [121.03,14.40],

   // [21.00,52.13],

    //[-9.10,38.42],

    [-66.07,18.28],

    //[51.35,25.15],

    [126.58,37.31],

    [26.10,44.27],

    //[37.35,55.45],

    //[30.04,-1.59],

    //[-62.43,17.17],

    //[-60.58,14.02],

    //[-56.12,46.46],

    [-61.10,13.10],

    //[-171.50,-13.50],

    [12.30,43.55],

    //[6.39,0.10],

    [46.42,24.41],

    //[-17.29,14.34],

    [-13.17,8.30],

    //[17.07,48.10],

    //[14.33,46.04],

    //[159.57,-9.27],

    [45.25,2.02],

    //[28.12,-25.44],

    //[-3.45,40.25],

    [32.35,15.31],

    //[-55.10,5.50],

    [31.06,-26.18],

    [18.03,59.20],

    //[7.28,46.57],

    [36.18,33.30],

    [68.48,38.33],

    [100.35,13.45],

    [21.26,42.01],

    //[1.20,6.09],

    //[-174.00,-21.10],

    [10.11,36.50],

    [32.54,39.57],

    [57.50,38.00],

    //[179.13,-8.31],

    [32.30,0.20],

    [30.28,50.30],

    [54.22,24.28],

    //[-0.05,51.36],

    [35.45,-6.08],

   //[-77.02,39.91],

    //[-64.56,18.21],

    //[-56.11,-34.50],

    [69.10,41.20],

    //[168.18,-17.45],

    [-66.55,10.30],

    [105.55,21.05],

    //[20.37,44.50],

    [28.16,-15.28],

    [31.02,-17.43],

    [-118.15,34.03],

    [-149.52,61.13],

    [116.04, 40.15],

    [129.43, 62.1],

    [150.48, 59.34]
]

var bounds = [
    [-180, -18], //赋值你想要的界限的西南坐标
    [190, 35] //赋值你想要的界限的东北坐标
]; //为bounds赋值，就是确定你想要的界限的范围
let arcs = []; //存每条线被划分的点的集合
let arcs_final = [];
let now = [];
const step = 400;
let finalLine;
mapboxgl.accessToken = "pk.eyJ1Ijoid2VuNzg5MjA4OCIsImEiOiJjbGZmOWNtZmgwOW9pM3B0Ymx2YThzZXkzIn0.vxFymiRVeq4vRQ91E4iJVg";
let map;
export default {
    name: 'Home',
    components: {
        Comment
    },
    data() {
        return {
            showComment: false,
            showOverlay: true,
            isLoadingOk: false,
            nowHeight: '',
            defaultHeight: '',
        }
    },
    methods: {
        drawUserLine() {
            //let layer = map.getLayer('user_line');
            map.getSource('user_line').setData(finalLine);
        },
        init() {
            map = new mapboxgl.Map({
                container: 'mapbox',
                style: 'mapbox://styles/wen7892088/clft11x1t00ei01pezewuxc6p',
                center: [119.9751, 31.8112],
                maxbounds: bounds,
                projection: 'mercator',
                bearing: -90,
                dragRotate: false,
                //zoom: 0.01,
                zoom: 0.8,
                maxZoom: 20,
                //minZoom: 0.01,
                pitchWithRotate: false,
                preserveDrawingBuffer: true,
                //touchZoomRotate: false,
            })
            //this.$refs.home.style.width = map.getCanvas().style.width;
            this.$refs.home.style.height = map.getCanvas().style.height;
            let marker = new mapboxgl.Marker().setLngLat([119.9751,31.8412]).addTo(map);
            marker.setRotation(90);
            let markerTian = new mapboxgl.Marker({
                color: 'red',
                size: 6,
            }).setLngLat([117.32, 39.13]).addTo(map);
            markerTian.setRotation(90);
            new mapboxgl.Popup({ anchor:'top',offset: [7,30], closeOnClick: false, closeButton: false, className: 'changzhou' }).setLngLat([119.9751,31.8412]).setText("江苏常州").addTo(map);
            new mapboxgl.Popup({ anchor:'top',offset: [7,30], closeOnClick: false, closeButton: false, className: 'changzhou' }).setLngLat([117.32, 39.13]).setText("天津市").addTo(map)
            let coordinates = [119.9751,31.8412];
            let geojson = {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': coordinates
                        }
                    },
                ]
            }
            let Point = {
                'type': 'FeatureCollection',
                'features': [

                ]
            }
            map.addControl(new MapboxLanguage({
                defaultLanguage: 'zh-Hans'
            }));
            map.off('rotate');
            map.dragRotate.disable();
            map.touchZoomRotate.disableRotation();
            map.on('load', () => {
                map.setLayoutProperty('continent-label', 'text-rotate', 90);
                map.setLayoutProperty('country-label', 'text-rotate', 90);
                map.setLayoutProperty('state-label', 'text-rotate', 90);
                map.setLayoutProperty('settlement-major-label', 'text-rotate', 90);
                map.setLayoutProperty('settlement-minor-label', 'text-rotate', 90);
                map.setLayoutProperty('settlement-subdivision-label', 'text-rotate', 90);

                map.addSource('line', {
                    'type': 'geojson',
                    lineMetrics: true,
                    'data': geojson
                })
                map.addSource('user_line', {
                    'type': 'geojson',
                    lineMetrics: true,
                    'data': geojson
                })
                map.addSource('total_line', {
                    'type': 'geojson',
                    lineMetrics: true,
                    'data': geojson
                })
                let len = fake.length;
                for(let i=0;i<len;i++) {
                    let newFea
                    if (!Point.features[i]) {
                        newFea = {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': fake[i]
                            }
                        }
                    }
                    Point.features.push(newFea)
                }
                map.addSource('point', {
                    'type': 'geojson',
                    'data': Point
                })
                map.addLayer({
                    id: 'user_line',
                    source: 'user_line',
                    type: 'line',
                    paint: {
                        'line-color': 'red',
                        'line-width': 3
                    },
                })
                map.addLayer({
                    id: 'segment',
                    source: 'line',
                    type: 'line',
                    paint: {
                        'line-color': 'rgb(0, 161, 233)',
                        'line-width': 2,
                        'line-gradient': [
                            'interpolate',
                            ['linear'],
                            ['line-progress'],
                            0,
                            'rgba(0, 161, 233, 0.2)',
                            0.6,
                            'rgba(0, 161, 233, 0.4)',
                            0.8,
                            'rgba(0, 161, 233, 0.6)',
                            1,
                            'rgb(0, 161, 233)'
                        ]
                    }
                })
                map.addLayer({
                    id: 'total_Line',
                    source: 'total_line',
                    type: 'line',
                    paint: {
                        'line-color': 'red',
                        'line-width': 6
                    }
                })
                map.addLayer({
                    'id': 'position',
                    'type': 'circle',
                    'source': 'point',
                    'paint': {
                        'circle-radius': 2,
                        'circle-color': 'rgb(0, 141, 253)'
                    }
                })
                const finalLine = {
                    type: 'FeatureCollection',
                    features: []
                }
                const segments = {
                    type: 'FeatureCollection',
                    features: []
                }
                const totalLine = {
                    type: 'FeatureCollection',
                    features: []
                }
                const options = {
                    properties: {},
                    resolution: 10000,
                    sharpness: 1,
                }
                const split = (lines, flag) => {
                    //for(let line of lines.features) {
                        const arc = []; //存放被切割的点
                        const bezier = bezierSpline(lines, options); //返回贝塞尔曲线对象
                        const len = length(bezier); //曲线长度
                        for(let i=0;i<len;i+=len/step) {
                            const p = along(bezier, i); //计算出下一个点
                            arc.push(p.geometry.coordinates);
                        }
                        if (!flag) arcs.push(arc);
                        else arcs_final.push(arc);
                    //}
                }
                fake.push(now);
                let finalFake = [];
                finalFake.push([119.9751, 31.8112])
                let counter = 0;
                const preWork = () => {
                    let len = fake.length;
                    for(let i=0;i<len;i++) {
                        let arr = [];
                        arr.push(fake[i]);
                        let midPoint = [(fake[i][0]+119.9751)/2, (fake[i][1]+31.8112)/2];
                        //进行修正
                        let diffLng = Math.abs(fake[i][0] - 119.9751);
                        let diffLat = Math.abs(fake[i][1] - 31.8112);
                        if (diffLat > diffLng) midPoint[0] += diffLng/3;
                        else midPoint[1] += diffLat/3;
                        arr.push(midPoint);
                        arr.push([119.9751, 31.8112])
                        let line = lineString(arr);
                        split(line, false);
                    }
                    let arr = [];
                    arr.push(finalFake[0])
                    let midPoint = [(finalFake[0][0] + 117.32)/2, (finalFake[0][1] + 39.13)/2]
                    midPoint[0] += (119.9751-117.32)/3
                    arr.push(midPoint)
                    arr.push([117.32, 39.13])
                    let line = lineString(arr)
                    split(line, true)
                }
                preWork();
                let maxLen = arcs.length;
                let secondFlag = false; //是否要画最后的那条线
                let thirdFlag = false;
                const animate = () => {
                    if (counter === step) {  //最后常州到天津的汇聚线
                        if (!secondFlag) {
                            counter = 0;   //重新画第二个动画
                            secondFlag = true
                        } else if(secondFlag && !thirdFlag) {
                            counter = 0;
                            thirdFlag = true
                        } else if(secondFlag && thirdFlag) return
                    }
                    if (!secondFlag && !thirdFlag) {
                        arcs.forEach((arc,i) => {
                            if (i == maxLen - 1) {
                                if (!finalLine.features[0]) {
                                    finalLine.features[0] = {
                                        type: 'Feature',
                                        geometry: {
                                            type: 'LineString',
                                            coordinates: []
                                        }
                                    }
                                }
                                finalLine.features[0].geometry.coordinates.push(arc[counter]);
                                map.getSource('user_line').setData(finalLine);
                                //return;
                            }
                        })
                    } else if(secondFlag && !thirdFlag) {
                        arcs.forEach((arc,i) => {
                            if (!segments.features[i] && i != maxLen - 1) {
                                segments.features[i] = {
                                    type: 'Feature',
                                    geometry: {
                                        type: 'LineString',
                                        coordinates: []
                                    },
                                }
                            }
                            if (i != maxLen-1)segments.features[i].geometry.coordinates.push(arc[counter]);
                        })
                    } else {
                        if(!totalLine.features[0]) {
                            totalLine.features[0] = {
                                type: 'Feature',
                                geometry: {
                                    type: 'LineString',
                                    coordinates: []
                                }
                            }
                        }
                        totalLine.features[0].geometry.coordinates.push(arcs_final[0][counter])
                        map.getSource('total_line').setData(totalLine);
                    }
                    map.getSource('line').setData(segments);
                    requestAnimationFrame(animate);
                    counter++;
                }
                this.isLoadingOk = true;
                animate();
/*                 function animateLine(arr) {  //传入一个出发点的数组
                    let len = geojson.features.length;
                    for(let i=0;i<len;i++) geojson.features[i].geometry.coordinates.push(arr);
                    let speed = 0.5;
                    let distance = [];
                    let maxDist = -1;
                    let maxIdx = -1;
                    for(let i=0;i<len;i++) distance.push(lineDistance(geojson.features[i])); //计算线段长度
                    //let distance = turf.lineDistance(geojson.features[0]);  //计算线段长度
                    //console.log(geojson.features[0]);
                    for(let i=0;i<len;i++) {
                        if (distance[i] > maxDist) {
                            maxDist = distance[i];
                            maxIdx = i;
                        }
                    }
                    let steps = [];  
                    for(let i=0;i<len;i++) steps.push(distance[i]/(60*speed)); 
                    //let steps = distance / (60*speed); //计算每一步的距离
                    let counter = 0;

                    let interval = setInterval(function() {
                        if (counter >= distance[maxIdx]) {
                            clearInterval(interval);
                            return;
                        }
                        let nextPoint = [];
                        for(let i=0;i<len;i++) nextPoint.push(along(geojson.features[i], counter));
                        //let nextPoint = turf.along(geojson.features[0], counter)
                        for(let i=0;i<len;i++) {
                            geojson.features[i].geometry.coordinates.push(nextPoint[i].geometry.coordinates);
                            geojson.features[i].geometry.coordinates.splice(1, 1);
                        }
                        //geojson.features[0].geometry.coordinates.push(nextPoint.geometry.coordinates);
                        //geojson.features[0].geometry.coordinates.splice(1, 1);
                        map.getSource('line').setData(geojson);
                        for(let i=0;i<len;i++) geojson.features[i].geometry.coordinates.splice(1, 0, [119.95, 31.78]);
                        //geojson.features[0].geometry.coordinates.splice(1, 0, [119.95, 31.78]);
                        counter += steps[0];
                    }, 20);
                }
                animateLine([119.95, 31.78]); */
/*                 function computeControlPoint(ps, pe, arc = 0.2) {
                    const deltaX = pe[0] - ps[0];
                    const deltaY = pe[1] - ps[1];
                    const theta = Math.atan(deltaY / deltaX);
                    const len = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) / 2 * arc;
                    const newTheta = theta - Math.PI / 2;
                    return [  //返回一个点
                        (ps[0] + pe[0]) / 2 + len * Math.cos(newTheta),
                        (ps[1] + pe[1]) / 2 + len * Math.sin(newTheta),
                    ];
                };
                function animateLine(timestamp) {
                    let process = null;
                    if(preTime == undefined) {
                        preTime = timestamp;
                    } else {
                        process = timestamp - preTime;
                    }
                    if(!process || process > 250) {
                        preTime = timestamp;
                        let ans = computeControlPoint(ps, pe, 0.04);
                        ps = ans;
                        if(ps[0] == pe[0]) {
                            cancelAnimationFrame(animation);
                            return;
                        }
                        geojson.features[0].geometry.coordinates.push([ps[0],ps[1]]);
                        map.getSource('line').setData(geojson);
                    }
                    animation = requestAnimationFrame(animateLine);
                } */
                // inspect a cluster on click
/*                 map.on('click', 'clusters', (e) => {
                    const features = map.queryRenderedFeatures(e.point, {
                        layers: ['clusters']
                    });
                    const clusterId = features[0].properties.cluster_id;
                    map.getSource('earthquakes').getClusterExpansionZoom(
                        clusterId,
                        (err, zoom) => {
                            if (err) return;

                            map.easeTo({
                                center: features[0].geometry.coordinates,
                                zoom: zoom
                            });
                        }
                    );
                });

                // When a click event occurs on a feature in
                // the unclustered-point layer, open a popup at
                // the location of the feature, with
                // description HTML from its properties.
                map.on('click', 'unclustered-point', (e) => {
                    const coordinates = e.features[0].geometry.coordinates.slice();
                    const mag = e.features[0].properties.mag;
                    const tsunami =
                        e.features[0].properties.tsunami === 1 ? 'yes' : 'no';

                    // Ensure that if the map is zoomed out such that
                    // multiple copies of the feature are visible, the
                    // popup appears over the copy being pointed to.
                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                    }

                    new mapboxgl.Popup()
                        .setLngLat(coordinates)
                        .setHTML(
                            `magnitude: ${mag}<br>Was there a tsunami?: ${tsunami}`
                        )
                        .addTo(map);
                });

                map.on('mouseenter', 'clusters', () => {
                    map.getCanvas().style.cursor = 'pointer';
                });
                map.on('mouseleave', 'clusters', () => {
                    map.getCanvas().style.cursor = '';
                }); */
            });
        }, 
    },
    watch: {
        isLoadingOk: () => {
            const preventDefault = (e) => {
                e.preventDefault();
            }
            document.removeEventListener('touchmove', preventDefault, {passive: false});
        },
        nowHeight: () => {
            if (this.nowHeight != this.defaultHeight) {
                document.body.style.overflow = 'hidden';
            } else {
                document.body.style.overflow = 'auto';
            }
        }
    },
    mounted() {
        now.push(Number(Cookies.get('lng')));
        now.push(Number(Cookies.get('lat')));
        this.defaultHeight = window.innerHeight;
        window.onresize = () => {
            this.nowHeight = window.innerHeight;
        }
        setTimeout(() => {
            let inp = document.querySelector('.my-input');
            inp.addEventListener('focus', () => {
                document.body.style.overflow = 'hidden';
                //document.body.style.height = '100rem';
            })
            inp.addEventListener('blur', () => {
                document.body.style.overflow = 'auto';
            })
        }, 500); //防止没有挂载好而获取不到节点
        this.$nextTick(() => {
            const Comment = this.$refs.Comment; //在此处调整输入框位置
            //console.log(Comment.$el);
            let width = Comment.$el.style.width;
            //console.log(typeof(width));
            let height = Comment.$el.style.height;
            let offset = parseInt(width) / 2;
            //console.log(offset);
            //console.log(Comment.$el.childNodes[0]);
            let node = Comment.$el.childNodes[0];
            node.style.top = height;
            node.style.left = offset + 'px';
        })
        const preventDefault = (e) => {
            e.preventDefault();
        }
        document.addEventListener('touchmove', preventDefault, {passive: false});
        getLocate().then((res) => {
            console.log(res.data.detail); //坐标数组，可以取前五个
            let len = res.data.detail.length;
            this.showOverlay = true;
            this.init();
            this.showOverlay = false;
        })
        let main = document.querySelector('#main');
        let comment = document.querySelector('#comment');
        let height = document.body.clientWidth;
        let width = window.screen.availHeight;
        comment.style.height = width + 'px';
        main.style.height = height + 'px'; //由于旋转问题，所以互换长宽
        main.style.width = width + 'px';
        setTimeout(() => { //延迟显示
            this.showComment = true
        }, 1200)
    },
}
</script>

<style scoped lang="scss">
/* .home {
    width: 100vh;
    height: 100vw;
    position: absolute;

    > svg {
        position: absolute;
        left: 0;
        top: 0;
    }

    > div {
        position: absolute;
        left: 0;
        top: 0;
    }
} */
* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
#home {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
</style>
<style>
/* html {
    transform: rotate(90deg) translate(50vw, -50vw);
    background-color: #1f1f1f;
} */
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right {
    display: none !important;
}
.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 100;
}
.mapboxgl-popup-tip {
    display: none;
}
.mapboxgl-popup-content {
    transform: rotate(90deg);
    padding: 12.5px 5px 12.5px 5px !important;
    width: 15vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 3.5vw;
    border-radius: 10px !important;
    background-color: transparent;
    box-shadow: 0 0 0;
    color: #848586;
    font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* -webkit-text-stroke: 0.2px white; */
}
</style>
